<template>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="customerDialogs"
        width="770px"
        center
      >
       <div class="content">{{ content }}</div>
        <div>
          <div style="text-align: center;">
          <p class="kf_top">{{title}}</p>
          <!-- <div>
              <img :src="kfdata.qrcode" width="110px" alt="">
          </div> -->
          </div>
          <div class="kf_body">
          <div class="flex">
            <img class="kf_logo" :src="kfdata.name!=''?'https://img1.17img.cn/ui/simg/instrument/20220308/yxt_kefu_moren_2x_20220719.png' :
            'https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/tx.jpg'" alt="">
          <div>
            <div class="kf_name"> {{ kfdata.name!=''?kfdata.name:'刘亚伟' }} <span>销售顾问</span></div>
            <div class="kf_news"><i class="el-icon-phone-outline pr8" ></i>
             {{ kfdata.mobile!=''?kfdata.mobile:'15718850776' }} 
            </div>
            <div class="kf_news"><i class="el-icon-message pr8"></i>{{kfdata.email!=''? kfdata.email:'liuyw@instrument.com.cn' }} </div>
          </div>
          </div>
       <div class="flex">
        <div class="mr30">
            <img class="kf_ewm" :src="kfdata.qrcode?kfdata.qrcode:'https://img1.17img.cn/ui/simg/instrument/20230302/yht/img/1679907270939.jpg'" alt="">
            <div class="kf_text">在线客服</div>
          </div>
          <img class="kf_img" src="@/assets/img/beiing_3.png" alt="">
       </div>
     
        </div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import Cookies from "js-cookie";
  import api from "@/api/index";
  export default {
    name: "customerDialog",
    data() {
      return {
        customerDialogs: false,
        kfdata: {
          name: "",
          tlname: "",
          email: "",
          mobile: "",
          pic: "",
        },
      };
    },
    props: {
      title: String,
      content:String,
      checkinfo:{
       type: Boolean,
       default: true
      }
    },
    mounted() {
      this.findSaleByIMListId();
    },
    methods: {
      goinfo(){
         this.$router.push('/helphome')  
      },
      findSaleByIMListId() {
        api.login.findAfterSale().then((res) => {
          if (res.code == 200) {
            this.kfdata = res.data;
          }
        });
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  ::v-deep .el-dialog--center .el-dialog__body{
      padding: 25px 0px 0px !important;
  }
  .ptb15 {
    padding: 8px 0;
  }
  .kf_top {
      margin: 30px auto 14px;
    text-align: center;
  font-size: 18px;
  color: #202933;
  line-height: 28px;
  width: 400px;
  }
  ::v-deep .el-dialog__header {
    background: #f5f8fc;
    text-align: left;
    font-size: 16px;
    color: #202933;
    padding: 12px 16px;
  }
  ::v-deep .el-dialog__header .el-dialog__headerbtn {
    top: 16px;
    right: 16px;
  }
  .flex_start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .kf_body{
    @include flex(row, flex-start, space-between);
    padding: 34px 48px 24px;
    background: linear-gradient(180deg, #EDF4FF 0%, rgba(255,255,255,0) 100%);
border-top: 1px solid #CEE5FC;
.kf_logo{
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 50%;
  margin-right: 24px;
}
.kf_name{
font-size: 16px;
font-weight: 600;
color: #202933;
line-height: 19px;
margin-bottom: 20px;
span{
  display: inline-block;
  padding-left: 8px;
font-size: 12px;
color: #7E8790;
line-height: 14px;
}
}
.kf_news{
font-size: 14px;
color: #4F5862;
line-height: 16px;
margin-bottom: 10px;
.pr8{
  padding-right: 8px;
}
}
.kf_ewm{
width: 89px;
height: 89px;
}
.kf_text{
  margin-top: 5px;
  text-align: center;
font-size: 12px;
color: #7E8790;
line-height: 14px;

}
.kf_img{
  width: 124px;

}
  }
  .content{
    text-align: center;
    font-size: 16px;
  }
  </style>